<template>
  <el-card shadow="hover" class="video-card">
    <h2 class="course-title">{{ course.title }}</h2>
    <video controls :src="currentVideoUrl" class="video-player"></video>
    <div class="course-details">
      <p class="course-description">{{ course.description }}</p>
      <el-row class="course-meta">
        <el-col :span="12">
          <el-tag type="primary">价格: ￥{{ course.price }}</el-tag>
        </el-col>
        <el-col :span="12" class="course-updated">
          更新时间: {{ course.updatedAt }}
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  course: {
    type: Object,
    required: true,
  },
  selectedChapterIndex: {
    type: Number,
    required: true,
  }
});

const currentVideoUrl = computed(() => {
  return props.course.chapters && props.course.chapters.length > 0
      ? props.course.chapters[props.selectedChapterIndex].playUrl
      : '';
});
</script>

<style scoped>
/* 视频组件样式 */
.video-card {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
}

.course-title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.video-player {
  width: 100%;
  height: auto;
  max-height: 500px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.course-description {
  font-size: 1rem;
  color: #666;
  margin-bottom: 10px;
}

.course-meta {
  margin-top: 10px;
}

.course-updated {
  text-align: right;
}
</style>
